<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
const showPicker = ref(false);
const pickeDate = ref([]);
// 定义外部事件
const emit = defineEmits(['click']);
// 最大日期就是当天
const maxDate = dayjs().format('YYYY-MM-DD');
const clearTime = () => {
  pickeDate.value = [];
  showPicker.value = false;
};
const onChange = () => {
  showPicker.value = false;
};
watch(pickeDate,()=>{
  emit('click', pickeDate.value)
})
</script>
<template>
  <div>
    <div class="select_box">
        <div class="pickeDate" @click="showPicker = true">
          <p> {{ pickeDate.length ? $MDY(pickeDate[0]) + '~' + $MDY(pickeDate[1]) : $t('Time') }}</p>
          <var-icon class="menu-down_icon" name="menu-down" color="#fff" />
        </div>
      </div>
    <var-popup v-model:show="showPicker" class="popup-box" @click-overlay="showPicker = false">
      <div class="picker-box">
        <var-date-picker v-model="pickeDate" :max="maxDate" range @change=onChange show-current>
          <template #range="{ choose: [startData, endDate] }">
            <span>{{ $MDY(startData) }} ~ {{ $MDY(endDate) }}</span>
            <div @click="clearTime" class="clearTime"> {{ $t('Cleartime') }}</div>
          </template>
        </var-date-picker>
      </div>
    </var-popup>
  </div>
</template>
<style lang="scss" scoped>
  .pickeDate {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.65);
  }
</style>
<style lang="scss">
.var-date-picker__body {
  background-color: #242424;
}
.var-date-picker {
  border-radius: 0;
}
.var-date-picker .var-day-picker__head li {
  color: rgba(255, 255, 255, 0.85);
}
.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] {
  color: rgb(255, 255, 255);
}
</style>